事件处理和表单绑定

事件处理

v-on（简写@）可以用于监听 DOM 事件，例如鼠标点击或键盘输入。此外，您还可以将v-on用于自定义事件，以便在组件之间通信。v-on除了可以监听事件外，还可以用于绑定属性和计算属性。使用v-on时，请确保正确设置事件处理程序的方法名和作用域。与v-on相关的指令还包括v-bind和v-model，它们分别用于绑定属性和表单元素的值。

data() {
    return {
        counter: 1
    }
}
methods: {
  counterFunc() {
    this.counter += 1;
  },
},

<button v-on:click="counter += 1">点击：{{ counter }}</button>
<button @click="counterFunc">点击：{{ counter }}</button>

Untitled

上述代码中定义了两个函数，均可实现点击后将值增加 1。

第一个 button 通过 v-on 绑定，将其方法直接写在等号后面。

第二个 button 通过 @ 绑定，封装了一个函数 counterFunc ，并在 methods 属性下定义。然后通过 @click 绑定该函数。

事件传递参数

可以通过 $event 对象来传递事件参数。例如：

methods: {
  counterFunc(event) {
     console.log(event.target.tagName)
  },
},
<button @click="counterFunc($event)">click</button>

在上述代码中，$event 是一个特殊的变量，代表了事件对象。我们将 $event 作为参数传递给 counterFunc 方法，然后在方法中使用 event.target.tagName 来获取触发事件的DOM元素的标签名。

也可以通过传递一些参数：

methods: {
  counterFunc(message) {
     console.log(message)
  },
},
<button @click="clickFunc('sanmu')">click</button>

表单绑定

表单绑定是将表单元素的值与 Vue 实例中的数据进行双向绑定的过程。可以通过v-model指令来实现。v-model指令可以用在input，textarea和select元素上。下面是一个简单的例子：

data() {
    return {
        message: ''
    }
}

<input v-model="message" placeholder="请输入..." />
<p>你输入的是：{{ message }}</p>

在上述代码中，message是Vue实例中的一个数据，使用v-model指令将其与input元素进行双向绑定。当用户输入时，message的值会随之改变，同时页面上的p元素也会随之更新。

除了输入框，下拉框也可以使用v-model指令进行双向绑定。例如：

<select v-model="selected">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<p>你选择的是：{{ selected }}</p>

在这个例子中，selected是 Vue 实例中的一个数据，使用v-model指令将其与select元素进行双向绑定。当用户选择一个选项时，selected的值会随之改变，同时页面上的p元素也会随之更新。

修饰符

可以使用修饰符来改变v-model的行为。例如，.lazy修饰符会将输入事件转化为change事件，.number修饰符会自动将用户输入的值转化为数字类型，.trim修饰符会自动去除用户输入值的首尾空格：

<input v-model.lazy="message" placeholder="请输入...">
<p>你输入的是：{{ message }}</p>

<input v-model.number="count" placeholder="请输入...">
<p>你输入的是：{{ count }}</p>

<input v-model.trim="text" placeholder="请输入...">
<p>你输入的是：{{ text }}</p>

在上述代码中，.lazy修饰符会将input元素的input事件转化为change事件，延迟更新message的值。.number修饰符会自动将用户输入的值转化为数字类型，而.trim修饰符则会自动去除用户输入值的首尾空格。

事件处理和表单绑定

事件处理

事件传递参数​

表单绑定

修饰符​

事件传递参数

修饰符